<template>
  <div class="map-contant" :id="el">
    <slot></slot>
  </div>
</template>
<script>
  // ---------- 地图功能 --------------
  import {addMassMark} from "../MassMark/main";

  export default {
    data() {
      return {
        center: this.mapInfo.center,
        zoom: this.mapInfo.zoom,
        enable: this.mapInfo.enable,
        style: this.mapInfo.style,
        adcode: this.mapInfo.adcode,
        map_content: null,
        //  ----------------------------------
        map: undefined,
        pointSimplifierIns: undefined
      };
    },
    mounted() {
      this.map = new AMap.Map(this.$el, this.map_info);
      // ---------- 地图功能 -----------------
      // 数据
      addMassMark(this.map, this.data_content, this);

    },
    watch: {
      data_content: function(val) {
        let layer = this.map.getLayers()[1];
        this.map.remove([layer]);
        addMassMark(this.map, val, this);
      },
      mapInfo: function(val) {
        this.map.setCenter(val.center);
      }
    },
    computed: {
      map_info: function() {
        return {
          center: this.center, //地图中心
          zoom: this.zoom, //地图级别
          mapStyle: this.style,
          rotateEnable: this.enable,
          dragEnable: this.enable,
          scrollWheel: this.enable,
          doubleClickZoom: this.enable,
          viewMode: "2D",
        };
      },
    },
    props: {
      el: {
        type: String,
        default: "map",
      },
      mapInfo: {
        type: Object,
        default: function() {
          return {
            center: [116.493846, 40.263609],
            zoom: 8,
            enable: true,
            style: "amap://styles/73767376d1e21c535f3e909bdd72a3fa",
            adcode: 110000,
          };
        },
      },
      addfunction: {
        type: String,
        default: "feature-adcode",
      },
      data_content: {
        type: Array,
        default: function() {
          return [];
        },
      },
    },
    methods: {},
  };
</script>
<style scoped>
.map-contant {
  height: 100%;
  width: 100%;
}
</style>
